<template>
  <div class="container">
    <el-dialog
      :title="ftform.Modifymode ? '修改学科' : '学科名称'"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form :model="form">
        <el-form-item label="学科名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="dialogVisible">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: '',
        delivery: true
      },
      formLabelWidth: '70px'
    }
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    ftform: {
      type: Object
      // type: {
      //   // 学科名称
      //   name: String,
      //   // 是否显示
      //   delivery: Boolean,
      //   // 是否开启修改模式
      //   Modifymode: Boolean
      // }

    }
  },
  methods: {
    handleClose (done) {
      this.$emit('addsubject', { determine: false })
      // done()
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done()
      //   })
      //   .catch(_ => { })
    },
    dialogVisible () {
      this.$emit('addsubject', { name: this.form.name, delivery: this.form.delivery, determine: true, Modifymode: this.ftform.Modifymode, id: this.ftform.id })
      this.form.name = ''
      this.form.delivery = false
    },
    cancel () {
      this.$emit('addsubject', { determine: false })
      this.form.name = ''
      this.form.delivery = false
    }
  },
  watch: {
    ftform: {
      handler (nval, oval) {
        this.form.name = this.ftform.name
        this.form.delivery = this.ftform.delivery
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.el-dialog {
  width: 28%;
}
</style>
